<template>
<div class="left-menu">
  <a-menu
      mode="inline"
      :openKeys="openKeys"
      :selectedKeys="selectedKeys"
      @click="handleClick"
      theme="dark">
    <a-sub-menu key="analyse" @titleClick="titleClick" >
      <template #title>
        <span><LineChartOutlined/>智能分析</span>
      </template>
        <a-menu-item key="web-border">看板</a-menu-item>
    <a-menu-item key="/control/analyse/data">工艺统计</a-menu-item>
    </a-sub-menu>

    <!-- <a-sub-menu key="compaction" @titleClick="titleClick">
      <template #title>
        <span><CodepenOutlined/>压实监控</span>
      </template>
      <a-menu-item key="/control/compaction/monitor">实时监控</a-menu-item>
      <a-menu-item key="/control/compaction/report">数据报表</a-menu-item>
      <a-menu-item key="/control/compaction/task">任务派遣</a-menu-item>
    </a-sub-menu> -->

    <!-- <a-sub-menu key="tamp" @titleClick="titleClick">
      <template #title>
        <span><CodepenOutlined/>强夯监控</span>
      </template>
      <a-menu-item key="/control/tamp/monitor">实时监控</a-menu-item>
      <a-menu-item key="/control/tamp/report">数据报表</a-menu-item>
      <a-menu-item key="/control/tamp/task">任务派遣</a-menu-item>
    </a-sub-menu> -->

    <!-- <a-sub-menu key="cement" @titleClick="titleClick">
      <template #title>
        <span><CodepenOutlined/>水泥搅拌桩</span>
      </template>
      <a-menu-item key="/control/cement/monitor">实时监控</a-menu-item>
      <a-menu-item key="/control/cement/report">数据报表</a-menu-item>
      <a-menu-item key="/control/cement/task">任务派遣</a-menu-item>
    </a-sub-menu> -->

<!--    <a-sub-menu key="cfg" @titleClick="titleClick">-->
<!--      <template #title>-->
<!--        <span><CodepenOutlined/>CFG工艺</span>-->
<!--      </template>-->
<!--      <a-menu-item key="/control/cfg/monitor">实时监控</a-menu-item>-->
<!--      <a-menu-item key="/control/cfg/report">数据报表</a-menu-item>-->
<!--      <a-menu-item key="/control/cfg/task">任务派遣</a-menu-item>-->
<!--    </a-sub-menu>-->

<!--    <a-sub-menu key="rotary" @titleClick="titleClick">-->
<!--      <template #title>-->
<!--        <span><CodepenOutlined/>旋挖钻</span>-->
<!--      </template>-->
<!--      <a-menu-item key="/control/rotary/monitor">实时监控</a-menu-item>-->
<!--      <a-menu-item key="/control/rotary/report">数据报表</a-menu-item>-->
<!--      <a-menu-item key="/control/rotary/task">任务派遣</a-menu-item>-->
<!--    </a-sub-menu>-->

<!--    <a-sub-menu key="paver" @titleClick="titleClick">-->
<!--      <template #title>-->
<!--        <span><CodepenOutlined/>摊铺监控</span>-->
<!--      </template>-->
<!--      <a-menu-item key="/control/paver/monitor">实时监控</a-menu-item>-->
<!--      <a-menu-item key="/control/paver/report">数据报表</a-menu-item>-->
<!--      <a-menu-item key="/control/paver/task">任务派遣</a-menu-item>-->
<!--    </a-sub-menu>-->

<!--    <a-sub-menu key="mix" @titleClick="titleClick">-->
<!--      <template #title>-->
<!--        <span><CodepenOutlined/>拌合监控</span>-->
<!--      </template>-->
<!--      <a-menu-item key="/control/mix/collect">实时监控</a-menu-item>-->
<!--      <a-menu-item key="/control/mix/data">数据报表</a-menu-item>-->
<!--      <a-menu-item key="/control/mix/setting">设置</a-menu-item>-->
<!--    </a-sub-menu>-->

<!--    <a-sub-menu key="water" @titleClick="titleClick">-->
<!--      <template #title>-->
<!--        <span><CodepenOutlined/>洒水降尘</span>-->
<!--      </template>-->
<!--      <a-menu-item key="/control/water/monitor">实时监控</a-menu-item>-->
<!--      <a-menu-item key="/control/water/data">数据报表</a-menu-item>-->
<!--    </a-sub-menu>-->

<!--    <a-menu-item key="/control/energy/survey">-->
<!--      <span><ThunderboltOutlined />能耗监测</span>-->
<!--    </a-menu-item>-->

    <a-menu-item key="/control/vehicle/monitor">
      <span><CodepenOutlined/>车辆监控</span>
    </a-menu-item>

<!--    <a-menu-item key="supervision-occupyStation">-->
<!--      <span><CodepenOutlined/>监理旁站</span>-->
<!--    </a-menu-item>-->

<!--    <a-menu-item key="document-manager">-->
<!--      <span><CodepenOutlined/>文档管理</span>-->
<!--    </a-menu-item>-->

    <a-sub-menu key="Environmental" @titleClick="titleClick" >
      <template #title>
        <span><CodepenOutlined/>环境监控</span>
      </template>
      <a-menu-item key="/control/datanalysis/analysis">数据分析</a-menu-item>
      <a-menu-item key="/control/datanalysis/dataquery">数据查询</a-menu-item>
    </a-sub-menu>

    <a-menu-item key="person-manager">
      <CodepenOutlined/><span>人员管理</span>
    </a-menu-item>

<!--    <a-menu-item key="car-manager">-->
<!--      <CodepenOutlined/><span>其他机械管理</span>-->
<!--    </a-menu-item>-->

    <a-menu-item key="test-detection">
      <CodepenOutlined/>
      <span>试验检测</span>
    </a-menu-item>

    <a-menu-item key="online-approval">
      <CodepenOutlined/><span>线上审批</span>
    </a-menu-item>

    <a-sub-menu key="manager" @titleClick="titleClick" >
      <template #title>
        <span><SettingOutlined />基础管理</span>
      </template>
      <a-menu-item key="/control/manager/cell">单元管理</a-menu-item>
      <a-menu-item key="/control/manager/device">机械管理</a-menu-item>
      <a-menu-item key="/control/manager/vehicle">车辆管理</a-menu-item>
    </a-sub-menu>
  </a-menu>
  <div class="rightText">泰安数字工程出品</div>
</div>
</template>

<script lang="ts">
import { useRouter } from 'vue-router';
import { defineComponent, onMounted, ref} from 'vue';
import { CodepenOutlined, SettingOutlined,LineChartOutlined,ThunderboltOutlined} from '@ant-design/icons-vue';
import store from "@/store"
import {useStore} from "vuex";

export default defineComponent({
  components: {
    CodepenOutlined,
    SettingOutlined,
    LineChartOutlined,
    ThunderboltOutlined
  },
  setup(){
    const store = useStore()
    const token = ref(JSON.parse(JSON.stringify(store.getters["userinfo/getUserInfo"])).token)
    const otherPage = [{
      key:"car-manager",
      value:"http://www.f3gps.cn:9999/gps-web/h5/outside?userId=jsbxj&password=8bd983108d6f3d2c7d3958c11349739e"
    },{
      key:"web-border",
      value:`http://zhihuigongdi.cn:6028/Index-Construction.html?token=${token.value}`
    },{
      key:"supervision-occupyStation",
      value:`http://58.56.207.43:5516/#/?token=${token.value}`
    },{
      key:"person-manager",
      value:`http://58.56.207.43:6034/#/?corpType=1&token=${token.value}`
    },{
      key:"document-manager",
      value:`http://58.56.207.43:5045/jump?token=${token.value}`
    },{
      key:"test-detection",
      value: `http://58.56.207.43:6044/#/?token=${token.value}`
    },{
      key:"online-approval",
      value: `http://58.56.207.43:6034/verifyCenterWeb/#/?token=${token.value}`
    }]
    let toUrl = '#'
    const openKeys:any = ref(['compaction'])
    const selectedKeys:any = ref(['/control/compaction/monitor'])
    const router = useRouter()
    const toUrl1 = 'http://www.f3gps.cn:9999/gps-web/h5/outside?userId=jsbxj&password=8bd983108d6f3d2c7d3958c11349739e'
    const toUrl2 = 'http://www.f3gps.cn:9999/gps-web/h5/outside?userId=swzs&password=e4af82cfa938363acb4f69f9b337a4a8'

    const titleClick = (e:any):void=>{
      if(otherPage.findIndex((item:any)=>{return item.value==e.key})<0) openKeys.value = [e.key]
    }

    const toURL = (url:string)=>{
      let otherUrlIndex=otherPage.findIndex((item:any)=>{return item.key===url})
      if(otherUrlIndex == 0){
        let userinfo = store.getters["userinfo/getUserInfo"];
        if (userinfo) {
          let sectioninfo = userinfo.section.find((item: any) => {
            return item.sectionId == '5'
          })
          if (sectioninfo) {
            let kindinfo = sectioninfo.craft.find((item: any) => {
              return item.kind == '5'
            });
            if (kindinfo.level == '0') {
              toUrl = toUrl1;
            } else {
              toUrl = toUrl2;
            }
            window.open(toUrl)
          }else{
            return false
          }
        }
      }else if(otherUrlIndex > 0){
        window.open(otherPage[otherUrlIndex].value)
      }else{
        router.push(url)
      }
    }

    const handleClick = (e:any):void =>{
      selectedKeys.value = [e.key]
      toURL(e.key)
    }

    onMounted(()=>{
      let routerUrlList = router.currentRoute.value.path.split("/");
      openKeys.value = [routerUrlList[routerUrlList.length-2]]
      selectedKeys.value = [router.currentRoute.value.path]
    })

    return {
      openKeys,
      selectedKeys,
      toUrl,
      toUrl1,
      toUrl2,
      handleClick,
      titleClick,
    }
  }
})
</script>

<style scoped lang="scss">
.left-menu{
  width: 220px;
  height: 100%;
  background: #061B48;
  .rightText {
    display: flex;
    position: absolute;
    left: 61px;
    bottom: 16px;
    width: 98px;
    height: 15px;
    font-size: 10px;
    font-family: 平方-简  中黑体;
    color: #ffffff;
    opacity: 0.4;
    line-height: 15px;
    margin: auto;
  }
}
</style>
